<template>
    <div class="app-container">
        <el-card>
            <el-tabs v-model="activeName">
                <!-- 用户管理tab页 -->
                <el-tab-pane label="登录设置" name="first" v-loading="loading">
                    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                        <el-form-item label="手机号：">
                            <el-input v-model="form.mobile" placeholder="请输入手机号" style="width: 300px;" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="新密码：" prop="password">
                            <el-input v-model="form.password" placeholder="请输入新密码" show-password style="width: 300px;"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="confirmClick">保存更新</el-button>
                            <el-button @click="cancelClick">重 置</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <!-- 个人详情tab页 -->
                <el-tab-pane label="个人详情" name="second" lazy>
                    <UserINfo></UserINfo>
                </el-tab-pane>
                <!-- 岗位信息tab页 -->
                <el-tab-pane label="岗位信息" name="third" lazy>
                    <JobInfo></JobInfo>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script>
import { getEmployeeBasicInfo, updEmployeeBasicInfo } from '@/api/employees'
import UserINfo from './components/user-info'
import JobInfo from './components/job-info.vue'

export default {
    name: 'DetailIndex',
    components: {
        UserINfo,
        JobInfo
    },
    data() {
        return {
            loading: false, // 加载状态
            activeName: 'first', // 当前选中的tab页（默认第一个）
            form: {
                mobile: '',
                password: ''
            },
            rules: {
                password: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                    { min: 6, max: 20, trigger: 'blur', message: '密码长度需在6-20位之间' }
                ]
            }
        }
    },
    methods: {
        // 获取员工基本信息
        async getEmployeeInfo() {
            this.loading = true
            const data = await getEmployeeBasicInfo(this.$route.params.id)
            this.form.id = data.id
            this.form.mobile = data.mobile
            this.loading = false
        },
        confirmClick() {
            this.$refs['form'].validate(async valid => {
                if(valid) {
                    await updEmployeeBasicInfo(this.form)
                    this.$message.success('更新密码成功')
                } else {
                    console.log('校验未通过');
                    return false;
                }
            })
        },
        cancelClick() {
            this.$refs['form'].resetFields()
        }
    },
    created() {
        this.getEmployeeInfo()
    }
}
</script>

<style lang="scss" scoped>
</style>